const CONTAINER_CLASS_NAME = 'r-spin-container';
const INNER_CLASS_NAME = 'spin-inner';

const spinSvg =
  '<svg class="spin-inner__dot" focusable="false" data-icon="loading" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="0 0 1024 1024"><path d="M988 548c-19.9 0-36-16.1-36-36 0-59.4-11.6-117-34.6-171.3a440.45 440.45 0 00-94.3-139.9 437.71 437.71 0 00-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.3C772.3 66 827 103 874 150c47 47 83.9 101.8 109.7 162.7 26.7 63.1 40.2 130.2 40.2 199.3.1 19.9-16 36-35.9 36z"></path></svg>';
let init = false;

function createDom(target) {
  if (init) {
    return;
  }
  init = true;

  target.classList.add(CONTAINER_CLASS_NAME);
  // 创建一个新的元素
  const spinDom = document.createElement('div');
  spinDom.innerHTML = `${spinSvg}<span>Loading...</span>`;
  spinDom.className = INNER_CLASS_NAME;
  // spinDom.setAttribute('data-loading', 'true');
  target.appendChild(spinDom);
}

function removeDom(target) {
  return setTimeout(() => {
    target.classList.remove(CONTAINER_CLASS_NAME);
    const spinDom = target.querySelector('.' + INNER_CLASS_NAME);
    // spinDom.setAttribute('data-loading', 'false');
    spinDom && target.removeChild(spinDom);
  }, 400);
}

export const vLoading = {
  mounted(el) {
    createDom(el);
  },
  beforeUpdate(el, binding) {
    binding.value ? createDom(el) : removeDom(el);
  }
};
